<%@page import="com.util.Counts"%>
<%@page import="com.util.PageBean"%>
<%@page import="com.biz.ProTypeBizImpl"%>
<%@page import="com.entity.ProType"%>
<%@page import="com.entity.UserInfo"%>
<%@page import="com.biz.ProductBizImpl"%>
<%@page import="com.entity.Product"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>商城首页</title>   
	<meta charset="UTF-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/modle.css">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		body{
			background: #F0FFF0;
		}
		.main-body-div{
			border: none;
			background: none;
			padding-right: 0px;
		}
		.prolist{
			width: 811px;
			padding: 5px;
			margin-left: 5px;
			display: inline-block;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
			background: #F9F9F9;
		}
		.prolist>.protypetitle{
			margin: 10px;
		}
		.prolist-body{
			clear: both;
		}
		.pro-show-div{
			width: 165px;
			height: 200px;
			display: inline-block;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
			margin: 10px;
			padding: 5px;
			font-size: 12px;
			text-align: center;
			background: white;
		}
		.pro-show-div:hover{
			box-shadow: 0px 0px 10px gray;
		}
		.pro-show-div>img{
			width: 150px;
			height: 150px;
			border-radius: 5px;
			margin-top: 5px;
		}
		.pro-show-div>p{
			line-height: 10px;
			margin: 5px;
		}
		.login-link{
			float: right;
			clear: left;
		}
		.protypelist{
			padding: 0px 15px;
			float: left;
			background: #F9F9F9;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
		}
		.protypelist ul{
			display: inline-block;
			width: 140px;
			padding: 0px;
			padding-bottom: 5px;
			text-align: center;
		}
		.protypelist .pttitle{
			list-style-type: none;
			padding: 5px;
			margin: 5px 0px;
			border-bottom: 1px solid #dcdcdc;
			color: blue;
		}
		.protypelist .ptstyle{
			display: inline-block;
			width: 100px;
			list-style-type: none;
			background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
			padding: 5px;
			border-radius: 5px;
			color: white;
			text-align: center;
			margin: 5px 1px;
		}
		.protypelist .ptstyle:hover{
			background: orange;
		}
		.protypetitle{
			background-image: linear-gradient(225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
			padding: 10px;
			padding-left: 20px;
			border-radius: 25px;
			color: white;
		}
		.page-style{
			padding: 0px;
			text-align: center;
		}
		.page-style span{
			margin: 5px;
		}
		.page-style span>a{
			text-decoration: none;
		}
		.page-style span>a:hover{
			color: red;
			text-decoration: underline;
		}
		#counts-div{
			padding: 10px;
			text-align: center;
			width: 120px;
			height: 300px;
			position: fixed;
			right: -5px;
			top: -5px;
			font-size: 12px;
		}
		#counts-div>p{
			border: 1px solid #dcdcdc;
			border-radius: 5px;
			background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
			margin: 0px;
			color: white;
			padding: 5px;
		}
		#counts-div>p:hover{
			background: orange;
		}
		#counts-div>div{
			display: none;
			width: 120px;
			height: 250px;
			overflow: auto;
			border: 1px solid #dcdcdc;
			border-radius: 5px;
			background: #fcfcfc;
		}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
	<script type="text/javascript">
		function showProInfo( id ){
			location="proInfo.jsp?id="+id;
		}
		function showptpros( ptid , ptname ){
			location="index.jsp?ptid="+ptid+"&ptname="+ptname;
		}
		
		$(function(){
			$("#counts-link").click(function(){
				$("#counts-body").toggle();
			});
		});
	</script>
  </head>
  
  <body class="mybody">
  	<div class="main">
  		<div class="index-title">
  			<iframe src="index-b-elem/header.jsp" frameborder="0" id="title-if"></iframe>
  		</div>
	    <div class="main-body-div">
	    	<div class="protypelist">
	    		<ul>
	    			<li class="pttitle"><span style="font-size: 20px;">商品类别</span></li>
	    		<%
	    		//根据关键字模糊查询需要的参数
	    		//获取查询关键字的值
	    		String key=request.getParameter("key");
	    		
	    		//根据类别查询商品时需要的参数
	    		//获取类别id
	    		String ptid=request.getParameter("ptid");
	    		//获取类别名
	    		String ptname=request.getParameter("ptname");
	    		
	    		//获取页码
	    		String mypage=request.getParameter("page");
	    		if(mypage==null) mypage="1";
	    		int currPage=Integer.parseInt(mypage);
	    		if(currPage<1)  currPage=1;
	    		
	    		
	    		List<ProType> ptlist=new ProTypeBizImpl().showProType();
	    		
	    		for(ProType pt:ptlist){
	    		%>
	    			<li class="ptstyle" <%=ptid!=null && ptid.equals(""+pt.getId())?"style='background:orange;'":"" %> onclick="showptpros(<%=pt.getId()%>,'<%=pt.getTname()%>')"><%=pt.getTname() %></li>
	    		<%
	    		}
	    		%>
	    		</ul>
	    	</div>
	    	<div class="prolist">
	    		<h2 class="protypetitle"><%=key==null?(ptid==null?"全部商品":ptname):"["+key+"]搜索结果"%></h2>
	    		<%
	    		PageBean<Product> pb=new ProductBizImpl().showProByPage(currPage, 16, ptid, key);
			   	for(Product p:pb.getList()){
			  	%>
		    	<div class="pro-show-div" onclick="showProInfo(<%=p.getId()%>)">
		    		<img class="pimg" src="<%=p.getProcover()==null?"images/p1.png":p.getProcover()%>"/>
		    		<p><%=p.getPname() %></p>
		    		<p>￥<%=p.getPrice() %>&nbsp;&nbsp;[库存:<%=p.getStock() %>]</p>
		    	</div>		
			   	<%
			   	}
				%>
				<p class="page-style">
						<span>总&nbsp;<%=pb.getTotalRow() %>&nbsp;条&nbsp;/&nbsp;共&nbsp;<%=pb.getTotalPage() %>&nbsp;页</span>
					    <span><a href="index.jsp?<%=ptid==null?"":"ptid="+ptid+"&ptname="+ptname+"&"%><%=key==null?"":"key="+key+"&" %>page=1">首页</a></span>
					    <span><a href="index.jsp?<%=ptid==null?"":"ptid="+ptid+"&ptname="+ptname+"&"%><%=key==null?"":"key="+key+"&" %>page=<%=currPage>1?currPage-1:1%>">上一页</a></span>
					   	<span>第&nbsp;<%=pb.getCurrPage() %>&nbsp;页</span>
					    <span><a href="index.jsp?<%=ptid==null?"":"ptid="+ptid+"&ptname="+ptname+"&"%><%=key==null?"":"key="+key+"&" %>page=<%=currPage<pb.getTotalPage()?(currPage+1):pb.getTotalPage()%>">下一页</a></span>
					    <span><a href="index.jsp?<%=ptid==null?"":"ptid="+ptid+"&ptname="+ptname+"&"%><%=key==null?"":"key="+key+"&" %>page=<%=pb.getTotalPage()%>">尾页</a></span>
				</p>
	    	</div>
		</div>
		<div class="index-footer">
  			<iframe src="index-b-elem/footer.jsp" frameborder="0" id="title-if"></iframe>
  		</div>
  		<div id="counts-div">
  			<p id="counts-link">当前在线人数:<%=Counts.onlineUserCount %></p>
  			<div id="counts-body">
	  			<%for(String username:Counts.onlineUserList){
	  			%>
	  			<span><%=username %></span><br>
	  			<%
	  			}
	  			%>
  			 </div>
  		</div>
   	</div>
  </body>
</html>
<jsp:include page="mybrowse.jsp"></jsp:include>
